<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<div th:replace="fragment/js::js"> </div>
<body>


<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md5"> &nbsp;</div>
        <div class="layui-col-md3" style="margin-top:200px;text-align: center">
            <h2>登录界面</h2>
            <input id="use" type="text" name="title" style="margin-top: 20px" required lay-verify="required"
                   placeholder="用户名" autocomplete="off" class="layui-input">

            <input id="pwd" type="text" name="title" style="margin-top: 15px"  required lay-verify="required"
                   placeholder="密码" autocomplete="off" class="layui-input">

            <button id="log" type="submit" style="margin-top: 20px" class="layui-btn layui-btn-radius">登录</button>
            <button id="reg" type="submit" style="margin-top: 20px;margin-left: 20px" class="layui-btn layui-btn-radius">注册</button>
        </div>
        <div class="layui-col-md4">&nbsp;</div>
    </div>
</div>
<script>
    layui.use(function () {
        var $=layui.$
    })

    $("#reg").click(function () {
        location.href="/register"
    })

    $("#log").click(function () {
        let username = $("#use").val()
        let password = $("#pwd").val()
        $.ajax({
                url: "/login",// 请求数据服务器地址，只能是当前项目，JSONP才能访问外网（需要服务器配合才能用）
                data: {"nickName":username,"password":password},// 要上传的参数
                dataType: 'json',// 服务器响应数据：json,text,html,xml
                success:function (data) {// 请求成功，回调函数,data，指的就是服务器返回的数据
                    if (data.status==200){
                        location.href="/pages/back/home"
                    }else {
                        location.href="/loginPage"
                        console.log("账号或密码错误，请重试")
                    }
                },
                type: 'post'// ajax请求的方式，post或get
                })
    })
</script>



</body>
</html>